<template>
  <view class="page-container">
    <!-- 功能1：选择本地图片 -->
    <view class="container">
      <button @click="chooseImage">选择本地图片</button>
      <image v-if="imageUrl" :src="imageUrl" mode="widthFix"></image>
    </view>

    <!-- 功能2：天气预报 -->
    <view class="weather-section">
      <button @click="getWeather">获取明天的天气预报</button>
      <view class="weather" v-if="weatherData">
        <view>日期：{{ weatherData.date }}</view>
        <view>星期：{{ weatherData.week }}</view>
        <view>最高温：{{ weatherData.high }}℃</view>
        <view>最低温：{{ weatherData.low }}℃</view>
      </view>
    </view>

    <!-- 功能3：获取当前地理位置 -->
    <view class="location-section">
      <button @click="getCurrentLocation">获取当前地理位置</button>
      <view class="location-info" v-if="locationData">
        <view>经纬度：{{ locationData.latitude }}, {{ locationData.longitude }}</view>
        <view>当前城市：{{ locationData.city }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 功能1
      imageUrl: '',
      // 功能2
      weatherData: null,
      // 功能3：存储位置信息
      locationData: null
    }
  },
  methods: {
    // 功能1：选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.imageUrl = res.tempFilePaths[0]
          uni.previewImage({
            current: this.imageUrl,
            urls: [this.imageUrl]
          })
        }
      })
    },

    // 功能2：获取天气
    getWeather() {
      uni.request({
        url: 'https://t.weather.sojson.com/api/weather/city/101230501',
        success: (res) => {
          console.log('天气接口数据：', res.data)
          if (res.data && res.data.data && res.data.data.forecast && res.data.data.forecast[1]) {
            const tomorrow = res.data.data.forecast[1]
            this.weatherData = {
              date: tomorrow.date,
              week: tomorrow.week,
              high: tomorrow.high.replace('高温', '').replace('℃', ''),
              low: tomorrow.low.replace('低温', '').replace('℃', '')
            }
          } else {
            uni.showToast({ title: '获取天气失败', icon: 'none' })
          }
        },
        fail: () => {
          uni.showToast({ title: '网络请求失败', icon: 'none' })
        }
      })
    },

    // 功能3：获取当前地理位置
    getCurrentLocation() {
      // 1. 获取经纬度
      uni.getLocation({
        type: 'gcj02', // 国测局坐标（中国标准）
        success: (res) => {
          const { latitude, longitude } = res
          // 2. 调用逆地理编码接口，将经纬度转为城市名称（使用腾讯地图接口，需替换自己的key）
          const key = '你的腾讯地图API key' // 👉 这里需要替换为你自己的key（免费申请：https://lbs.qq.com/）
          uni.request({
            url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${key}`,
            success: (geoRes) => {
              console.log('逆地理编码结果：', geoRes.data)
              if (geoRes.data.status === 0) { // 接口调用成功
                const city = geoRes.data.result.address_component.city
                this.locationData = {
                  latitude: latitude.toFixed(6), // 保留6位小数
                  longitude: longitude.toFixed(6),
                  city: city || '未知城市'
                }
              } else {
                uni.showToast({ title: '解析位置失败', icon: 'none' })
              }
            },
            fail: () => {
              uni.showToast({ title: '位置解析请求失败', icon: 'none' })
            }
          })
        },
        fail: (err) => {
          // 失败可能是用户拒绝授权
          uni.showToast({ title: '请允许获取位置权限', icon: 'none' })
          console.log('获取经纬度失败：', err)
        }
      })
    }
  }
}
</script>

<style>
.page-container {
  padding: 20px;
  background-color: #fff;
}

/* 功能1样式 */
.container {
  margin-bottom: 30px;
}
image {
  width: 100%;
  margin-top: 20px;
  border-radius: 8px;
}

/* 功能2样式 */
.weather-section {
  margin-top: 30px;
  margin-bottom: 30px;
}
.weather {
  margin-top: 15px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 8px;
  line-height: 2;
}

/* 功能3样式 */
.location-section {
  margin-top: 30px;
}
.location-info {
  margin-top: 15px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 8px;
  line-height: 2;
}

/* 通用按钮样式 */
button {
  width: 100%;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  margin-bottom: 10px;
}
</style>